<template>
  <div class="good-box">
    <van-image
        class="cover-image"
        :src="DOMAIN + good.goods_img"
        width="100px"
        height="200px"
        @click="goGoodDetail">
        <!-- 插槽,如果图片请求404提供的默认图片-->
        <template v-slot:error>
          <img class="cover-image" src="http://localhost:3000/api/upload_5ab1ad8c4642569b7fb1ecee400b8f17.jpeg">
        </template>
    </van-image>
    <div class="title">{{good.goods_name}}</div>
  </div>
</template>
<script>
// 如果是export default , import的时候就不用 大括号
// 否则即使导入一个组件也要加上大括号
import Image from 'vant/es/image'
import "vant/es/image/style"
import { useRouter } from 'vue-router'
import { DOMAIN } from '../utils/const'

export default {
  components: {
    [Image.name] : Image
  },
  props: {
      good: {
         type: Object,
      }
    },
  emits: [

  ],
  setup(props, context){
       const router = useRouter()

       const goGoodDetail = ()=>{
           // 最前面的反斜杠是必须的
           router.push('/detail/' + props.good.id)
       }
       return {
           goGoodDetail,
           DOMAIN
       }
  }
}
</script>
<style scoped>
.good-box{
  display: flex;
  flex-direction: column;
  width: 30%;
  height: 205px;
  margin-left: 10px;
}
.cover-image{
  width: 100px;
  height: 145px;
}
.title{
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 15px;
  text-align: left;
  font-weight: bold;
}

</style>
